<template>
  <a-modal
    v-model:visible="visible"
    draggable
    width="500px"
    @cancel="cancelMethod"
    @before-ok="handleBeforeOk"
  >
    <template #title>
      {{
        formData.id
          ? `${$t('columns.operations.edit')}`
          : `${$t('searchTable.operation.create')}`
      }}补贴周期
    </template>
    <a-form
      ref="formRef"
      :label-col-props="{ span: 6 }"
      :model="formData"
      :wrapper-col-props="{ span: 18 }"
      class="form"
    >
      <a-form-item
        :rules="[{ required: true, message: '请输入周期名称' }]"
        field="name"
        label="周期名称"
      >
        <a-input v-model="formData.name" placeholder="请输入周期名称" />
      </a-form-item>
      <a-form-item
        :rules="[{ required: true, message: '请选择期区' }]"
        field="area"
        label="期区"
      >
        <a-input v-model="formData.areaName" disabled></a-input>
      </a-form-item>
      <a-form-item
        :rules="[{ required: true, message: '请选择年份' }]"
        field="yearStr"
        label="年份"
      >
        <a-year-picker
          v-model="formData.yearStr"
          style="width: 100%"
          placeholder="请选择年份"
        />
      </a-form-item>
      <a-form-item
        :rules="[{ required: true, message: '请输入养老补贴金额按月' }]"
        field="yanglaofee"
        label="养老补贴金额按月"
      >
        <a-input-number
          v-model="formData.yanglaofee"
          :formatter="formatter"
          :hide-button="true"
          :parser="parser"
          placeholder="请输入养老补贴金额按月"
        />
      </a-form-item>
      <a-form-item
        :rules="[{ required: true, message: '请输入医疗补贴金额按月' }]"
        field="yiliaofee"
        label="医疗补贴金额按月"
      >
        <a-input-number
          v-model="formData.yiliaofee"
          :formatter="formatter"
          :hide-button="true"
          :parser="parser"
          placeholder="请输入医疗补贴金额按月"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import {
    tCycleAdd,
    tCycleDetail,
    tCycleUpdate,
    TCycleVO,
    tDictPage,
    TDictVO,
  } from '@/api/subsidy';
  import { useUserStore } from "@/store";

  const formRef = ref();
  const visible = ref(false);
  const userStore = useUserStore();
  const personForm = () => {
    return {
      area: userStore.userInfo.user.area,
      areaName: userStore.userInfo.user.areaName,
      id: '',
      name: '',
      yanglaofee: 0,
      year: 0,
      yiliaofee: 0,
      yearStr: '',
    };
  };

  const formData = ref(personForm());

  const getUserMethod = async (id: string) => {
    const { data } = await tCycleDetail(id);
    formData.value = data;
    formData.value.yearStr = data.year.toString();
  };
  const formatter = (value: string) => {
    const values = value.split('.');
    values[0] = values[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return values.join('.');
  };
  const parser = (value: string) => {
    return value.replace(/,/g, '');
  };

  function handleChangeVisible(obj: TCycleVO) {
    visible.value = !visible.value;
    getUserMethod(obj.id);
  }
  const cancelMethod = () => {
    visible.value = false;
  };
  const emit = defineEmits(['refresh']);

  function handleBeforeOk(done: any) {
    formRef.value.validate((valid: any) => {
      formData.value.year = Number(formData.value.yearStr);
      if (valid) {
        done(false);
      } else if (formData.value.id !== '') {
        tCycleUpdate(formData.value)
          .then(() => {
            Message.success('操作成功');
            emit('refresh');
            done();
          })
          .catch(() => {
            done(false);
          });
      } else {
        tCycleAdd(formData.value)
          .then(() => {
            Message.success('操作成功');
            emit('refresh');
            done();
          })
          .catch(() => {
            done(false);
          });
      }
    });
  }

  defineExpose({ handleChangeVisible });
</script>
